
import Taro, {Component} from '@tarojs/taro'
import {View, Button, Input, Form} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime, isBankCard, isIDCard, isPhone} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'

import './creditAdd.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class CardAuth extends Component<IHomeProps> {
  state = {
    idCardNo: '', // 身份证号码 ,
    cardNo: '', // 银行卡卡号 ,
    realName: '', // 真实姓名 ,
    reservePhone: '', // 银行预留手机号 ,
    smsCode: '', // 短信验证码
    getCodeText: '获取验证码',
    btnCodeStatus: false,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '实名认证'})
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: '实名认证'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getCodes() {
    let { reservePhone,btnCodeStatus } = this.state
    if(typeof btnCodeStatus === 'number') return
    if(!reservePhone){getRuntime().showToast('请填写手机号~'); return false}
    if(!isPhone){getRuntime().showToast('请填写11位手机号码~'); return false}
    let { userStore } =  this.props.stores
    userStore.getSmsCode({
      form: {
        phoneNumber: reservePhone
      },callback: () => {
        this.countDown()
        getRuntime().showToast('验证码发送成功,请注意查收~')
      }
    })
  }

  // 验证码倒计时
  countDown() {
    let getCodeText = 60
    let timer = setInterval(() => {
      getCodeText--
      if(getCodeText===0){
        clearInterval(timer)
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false,
        })
      }else {
        this.setState({
          getCodeText: getCodeText+'s',
          btnCodeStatus: true,
        })
      }
    },1000)
  }

  changeInput(field: string, e) {
    this.setState({ [field]: e.detail.value })
  }

  submit() {
    let { idCardNo, cardNo, realName, reservePhone, smsCode } = this.state
    if(!realName) { getRuntime().showToast('请填写真实姓名'); return }
    if(!idCardNo) { getRuntime().showToast('请填写身份证号码'); return }
    if(!isIDCard(idCardNo)) { getRuntime().showToast('请填写正确的身份证号码'); return }
    if(!cardNo) { getRuntime().showToast('请填写银行卡卡号'); return }
    if(!isBankCard(cardNo)) { getRuntime().showToast('请填写正确的银行卡卡号'); return }
    if(!reservePhone) { getRuntime().showToast('请填写银行预留手机号'); return }
    if(!smsCode) { getRuntime().showToast('请填写验证码'); return }

    let { cardStore } = this.props.stores
    cardStore.creditCardActualVerify({
      form: {
        idCardNo, cardNo, realName, reservePhone, smsCode
      },
      callback: () => {
        getRuntime().navigateTo('pages/card/authSuccess')
      }
    })
  }

  render() {
    let { btnCodeStatus,getCodeText } = this.state
    return (
      <View className='credit-add'>
        <View className='form-wrap content-30'>
          <Form>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>真实姓名</View>
              <View className='form-wrap__content'>
                <Input className='input' name='realName' onInput={this.changeInput.bind(this,'realName')} placeholderClass='placeholder-class' placeholder='请输入真实姓名' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>身份证号码</View>
              <View className='form-wrap__content'>
                <Input className='input' name='idCardNo' maxLength={20} onInput={this.changeInput.bind(this,'idCardNo')} placeholderClass='placeholder-class' placeholder='请输入身份证号码' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>储蓄卡卡号</View>
              <View className='form-wrap__content'>
                <Input className='input' name='cardNo' type='number' onInput={this.changeInput.bind(this,'cardNo')} placeholderClass='placeholder-class' placeholder='请输入储蓄卡卡号' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>预留手机号</View>
              <View className='form-wrap__content'>
                <Input className='input' name='reservePhone' type='number' onInput={this.changeInput.bind(this,'reservePhone')} placeholderClass='placeholder-class' placeholder='请输入银行预留手机号' />
              </View>
            </View>

            <View className='form-wrap__group bbnone'>
              <View className='form-wrap__title'>短信验证码</View>
              <View className='form-wrap__content '>
                <Input className='input' name='smsCode' type='number' onInput={this.changeInput.bind(this,'smsCode')} placeholderClass='placeholder-class' placeholder='请输入短信验证码' />
                <Button className='get-code btn-get-code color-theme' onClick={this.getCodes.bind(this)} disabled={btnCodeStatus}>{getCodeText}</Button>
              </View>
            </View>
            <View className='page-submit' onClick={this.submit.bind(this)}>立即认证</View>
          </Form>
        </View>

        <View className='page-tips'>说明： 通过储蓄卡进行实名认证, 请输入一个有效的储蓄卡号码</View>

        <View className='footer-block'  />
        <View className='footer-block'  />

      </View>
    )
  }
}

export default CardAuth
